<template>
  <div>
    <dl v-for="(v, i) in list" :key="i" style="display: flex;" @click="toDetail(v.id)">
      <dt><img :src="v.image" alt=""></dt>
      <dd>
        <h3>{{ v.title }}</h3>
        <p>{{ v.desc }}</p>
      </dd>
    </dl>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const list = ref([]);


const toDetail = id => {
  console.log(id)

  router.push('/detail/' + id)
}
const getList = async () => {
  const resp = await axios.get('/api/list');
  list.value = resp.data;
}
getList()
</script>